<template>
  <div class="mod-intro">
    <div class="hd">{{ title }}</div>
    <div class="bd">
      <div
        ref="contentRef"
        class="intro"
        :class="{ expand }"
        v-html="data"
      ></div>
      <a v-if="!expand" class="btn-toggle" @click="onClick">展开更多...</a>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "@vue/composition-api";

export default {
  props: {
    title: {
      type: String,
      default: "企业介绍"
    },
    data: {
      type: String,
      required: true
    }
  },
  setup() {
    const contentRef = ref();
    const expand = ref(true);

    function onClick() {
      expand.value = true;
    }

    onMounted(() => {
      if (contentRef.value) {
        const h = contentRef.value.getBoundingClientRect().height;
        if (h > 120) {
          expand.value = false;
        }
      }
    });

    return {
      contentRef,
      expand,
      onClick
    };
  }
};
</script>

<style scoped></style>
